<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>员工列表</title>
    <link rel="stylesheet" th:href="@{/static/css/index.css}"/>
    <script th:src="@{/static/js/vue.js}"></script>
</head>
<body>
<table id="dataTable" cellpadding="0" cellspacing="0">
    <tr>
        <th colspan="6">员工列表</th>
    </tr>
    <tr>
        <th>序号</th>
        <th>员工信息</th>
        <th>年龄</th>
        <th>性别</th>
        <th>邮箱</th>
        <th>操作(<a th:href="@{/toAdd}">add</a>)</th>
    </tr>
    <!--status 状态对象吧-->
    <tr th:each="emp,status : ${page.list}">
        <!--id也可能不是连续的 需要连续时 需要status对象-->
        <td th:text="${status.count}"></td>
        <td th:text="${emp.empName}"></td>
        <td th:text="${emp.age}"></td>
        <td th:text="${emp.gender}"></td>
        <td th:text="${emp.email}"></td>
        <td>
            <a th:href="@{'/employee/' + ${emp.empId}}">修改</a>
            <a @click="deleteEmployee" th:href="@{'/employee/' + ${emp.empId}}">删除</a>
        </td>
    </tr>
</table>
<div style="text-align: center">
    <button><a th:if="${page.hasPreviousPage}" th:href="@{/employee/page/1}">首页</button>
    <button><a th:if="${page.hasPreviousPage}" th:href="@{'/employee/page/' + ${page.prePage}}">上一页</button>
    <span th:each="num : ${page.navigatepageNums}">
        <a th:if="${page.pageNum == num}" style="color:darkred" th:href="@{'/employee/page/' + ${num}}" th:text="'[' + ${num} + ']'"></a>
        <a th:if="${page.pageNum != num}" th:href="@{'/employee/page/' + ${num}}" th:text="${num}"></a>
    </span>
    <button><a th:if="${page.hasNextPage}" th:href="@{'/employee/page/' + ${page.nextPage}}">下一页</button>
    <button><a th:if="${page.hasNextPage}" th:href="@{'/employee/page/' + ${page.pages}}">尾页</button>
</div>

<form id="form" method="post">
    <input type="hidden" name="_method" value="delete">
</form>

<script>
    var vm = new Vue({
        el:'#dataTable',
        methods:{
            deleteEmployee:function (event){
                if(confirm("是否确认删除")){
                    var elementById = document.getElementById("form");
                    elementById.action = event.target.href;
                    elementById.submit();
                }
                event.preventDefault();
            }
        }
    });
</script>
</body>
</html>